<template>
	<view class="team hui">
		<view class="head">
			<u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" bgColor="transparent">
				<view class="u-nav-slot b_flex_c" slot="center">
					<view class="city">客户统计</view>
				</view>
			</u-navbar>
		</view>
		<view class="time_box b_flex_c">
			<view @click="startShow=true">
				<u--input :customStyle="customStyle" fontSize="13px" :clearable="true" placeholder="开始时间" v-model="params.start" :readonly="true"></u--input>
			</view>
			-
			<view @click="endShow=true">
				<u--input :customStyle="customStyle" fontSize="13px" :clearable="true" placeholder="结束时间" v-model="params.end" :readonly="true"></u--input>
			</view>
			
			<view class="s_box b_flex_cc" @click="fcShow=true">
				<view class="s_right">{{fctext}}</view>
				<u-icon name="arrow-down-fill" color="#000000" size="11"></u-icon>
			</view>
			
			<view class="btn" @click="search">搜索</view>
             <view class="btn orange" @click="clear">重置</view>
		</view>
		
		<view style="height: 58px;"></view>
		
		
				<view class="lists_box" >
		
					<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据"
						@selection-change="selectionChange">
						<uni-tr>
							<uni-th width="50" align="center">客户名称</uni-th>
							<uni-th width="50" align="center">订单量</uni-th>
							<uni-th width="50" align="center">
								销售额
							</uni-th>
							<uni-th width="50" align="center">
								利润率
							</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in list" :key="index">
							<uni-td align="center">{{ item.users.nickname }}</uni-td>
							<uni-td align="center">{{ item.num }}</uni-td>
							<uni-td align="center">{{ item.hj }}</uni-td>
							<uni-td align="center">{{ item.mlv }}</uni-td>
						</uni-tr>
					</uni-table>
		
				</view>
				
		<u-picker @confirm="setFc" :show="fcShow" :columns="fc" keyName="name" @close="fcShow=false"
			@cancel="fcShow=false" :closeOnClickOverlay="true"></u-picker>
		<u-datetime-picker v-if="time" :show="startShow" mode="date" v-model="start" @cancel="startShow=false"
			@confirm="setStartTime" :minDate="time.minDateUsers" :maxDate="time.maxDates"></u-datetime-picker>

		<u-datetime-picker v-if="time" :show="endShow" mode="date" v-model="end" @cancel="endShow=false"
			@confirm="setEndTime" :minDate="time.minDateUsers" :maxDate="time.maxDates"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		khTotal,
		fcList,
		TimeShow
	} from "@/require/api.js";
	export default {
		data() {
			return {
				customStyle:{paddingLeft:'3px',paddingRight:'3px',width:'75px'},
				list: [],
				total: 0,
				params: {
					page: 1,
					start: '',
					end: '',
					fc_id:''
				},
				show: false,
				fc: [],
				fctext:'全部分仓',
				fcShow: false,
				startShow: false,
				endShow: false,
				end: '',
				start: '',
				time: '',
				top:0
			}
		},
		onShow() {
			this.top = uni.getSystemInfoSync().statusBarHeight + 44;
			
		},
		onLoad() {
			this.getFc();
			this.getTimeShow();
		},
		methods: {
			clear(){
				this.params= {
					page: 1,
					start: this.time.monthStart,
					end: this.time.maxDate,
					fc_id:''
				};
				this.end=this.time.maxDates;
				this.start=this.time.monthStarts;
				this.fctext='全部分仓';
				this.getList();
			},
			search(){
				this.getList();
			},
			setFc(e){
				
				this.params.fc_id=e.value[0].id;
				this.fctext=e.value[0].name;
				this.fcShow=false;
			},
			setEndTime(e) {
				if (e.value < this.start) return this.$project.toast('结束时间不能小于开始时间');
				this.params.end = this.$project.changeTime(e.value, 1, 2);
				this.endShow = false;
			},
			setStartTime(e) {
			
				if (this.end&&e.value > this.end) return this.$project.toast('开始时间不能大于结束时间');
			
				this.params.start = this.$project.changeTime(e.value, 1, 2);
				this.startShow = false;
			},
			async getTimeShow() {
				let {
					code,
					data
				} = await TimeShow();
				if (code == 1) {
					this.time = data;
					this.params.start=data.monthStart;
					this.params.end=data.maxDate;
					this.end=data.maxDates;
					this.start=data.monthStarts;
					this.getList();
				}
			},
			async getFc() {
				let {
					data,
					code
				} = await fcList();
				if (code == 1) {
					this.fc[0] = data;
				}
			},
			edit(e) {
				uni.navigateTo({
					url: '/pages/kh/info?id=' + e.id
				})
			},
			setShow() {
				if (this.total < 1) {
					this.show = true;
				} else {
					this.show = false;
				}
			},
			async getList() {
				this.params.page = 1;
				let {
					code,
					data
				} = await khTotal(this.params);

				if (code != 1) return;
				this.list = data;
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep {
		.u-navbar--fixed {
			background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
		}
		.u-input {
			border: 1rpx solid #eee;
		}
	}

	.head {
		background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
	}

	.team_box {
		padding: 0rpx 25rpx;
	}

	.team_list {
		display: flex;
		align-items: center;
		justify-content: space-between;

		border-bottom: 2rpx solid #eee;
	}

	.team_img {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.info_name {
		background-color: white;
		margin-top: 30rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		width: 100%;
	}

	.user_content {
		width: 60%;
	}

	.team_time {
		font-size: 26rpx;
		color: #343434;
	}

	.team_img image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.info_time {
		padding-left: 30rpx;
	}

	.team_name {
		font-size: 32rpx;
		color: #333333;
		padding: 10rpx 0;
	}

	.captain {
		width: 68rpx;
		height: 28rpx;
		border: 1px solid #FF4040;
		border-radius: 14rpx;
		font-size: 22rpx;
		color: #FF4040;
		text-align: center;
		line-height: 28rpx;
	}

	.dissolution {
		width: 146rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background: #FF4040;
		border-radius: 20rpx;
		color: #fff;
		font-size: 22rpx;
	}

	.remove {
		width: 146rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background: #FFE048;
		border-radius: 20rpx;
		color: #333;
		font-size: 22rpx;
	}

	.bitmap {
		text-align: center;
		padding-top: 100rpx;
	}

	.bitmap image {
		width: 60%;
	}

	.bitmap view {
		color: gray;
		font-size: 26rpx;
		margin-top: 30rpx;
	}

	.btn_box {
		background-color: #F0892D;
		color: white;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		margin-left: auto;
	}

	.time_box {
		background-color: white;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		position: fixed;
		left: 0;
		z-index: 100;
	}

	.btn {
		background-color: #18BC9C;
		width: 150rpx;
		text-align: center;
		color: white;
		box-sizing: border-box;
		padding: 15rpx 0;
		border-radius: 15rpx;
		font-size: 26rpx;
		margin-left:5rpx;
	}
	
	.orange{
		background: #FF4040;
	}
	
	.s_box{
		width: 46%;
		background-color: white;
		box-sizing: border-box;
		padding: 16rpx 0;
		border-radius: 45rpx;
	}
	
	.s_right{
		margin-right:5rpx;
		font-size: 26rpx;
	}
	
	.lists_box {
		margin-top: 20rpx;
		box-sizing: border-box;
		//padding: 40rpx 0 0 0;
		background-color: white;
		text-align: center;
		z-index: 0;
	}
</style>